<template>
  <div class='submit-info'>
    <el-dialog
      :visible.sync="$store.state.dias.submitInfo.show"
      width="500px"
      center
      class="bank-card"
      :title="state | formaltTitle"
      >
      <main v-if="state==0">
        <div v-for="(item, index) in modelData" :key="index" class="box mb20">
          <span class="title">{{item.label}}：</span>
          <el-input placeholder="" class="" v-if="item.input"></el-input>
          <el-radio-group v-else-if="item.radios">
            <el-radio v-for="(opt, optIndex) in item.radios" :key="optIndex" :label="opt.value">{{opt.label}}</el-radio>
          </el-radio-group>
          <el-input
            v-else-if="item.isTextarea"
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
          >
          </el-input>
          <span v-else-if="item.islabel">￥<span class="color-red ft18 ml10">1800</span></span>
        </div>
        <el-button class="submit-btn" type="danger" @click="doBuy">购买</el-button>
      </main>
      <main v-else-if="state==1" class="pr0">
        <div class="mb20">
          <span>订单金额：</span>
          <span>￥<span class="color-red ft18 ml10">1800</span></span>
        </div>
        <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
          <el-tab-pane v-for="(item, index) in modelData1" :key="index" :label="item.label" :name="item.label">
            <div v-if="item.code" class="content_1">
              <img :src="item.code.url||codeImg" alt="">
              <p><span :class="item.code.icon"></span><span>{{item.code.content}}</span></p>
            </div>
            <div v-else class="content_2">
              <p class="title color-999">{{item.title}}</p>
              <p class="progress">
                <span v-for="(opt, optIndex) in item.list0" :key="optIndex" :class="'mr20 '+ (item.index==optIndex?'color-blue':'color-999')">{{optIndex+1}}、{{opt.label}}</span>
              </p>
              <p class="input-box">
                <el-input v-model="info[item.list0[item.index].prop]" :placeholder="item.list0[item.index].placeholder"></el-input>
              </p>
              <p class="btn-box mt20">
                <el-button class="btn" type="success" v-if="item.index>0" @click="item.index--">上一步</el-button>
                <el-button class="btn" type="primary" @click="doNext(item)">{{item.index==0?"下一步":"确定"}}</el-button>
              </p>
            </div>
          </el-tab-pane>
        </el-tabs>
      </main>
      <main v-else-if="state==2" class="pr0 pay-result">
        
        <span class="icon-duigou iconfont color-green"></span>
        <p>支付成功或者失败</p>
      </main>
    </el-dialog>
  </div>
</template>
<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      modelData:[
        {prop:"",label:"收货人",input:true},
        {prop:"",label:"联系电话",input:true},
        {prop:"",label:"收货地址",input:true},
        {prop:"",label:"发票",radios:[{label:"需要发票",value:"1"},{label:"不需要发票",value:"2"}]},
        {prop:"",label:"备注",isTextarea:true},
        {prop:"money",label:"订单金额",islabel:true,}
      ],
      codeImg:require('@/assets/imgs/homepage/code.jpg'),

      state:0,//0 填写信息，1 付款，2 付款完成

      activeName:"支付宝",
      modelData1:[
        {label:"支付宝",value:"",code:{
          url:"",
          icon:"iconfont icon-saoyisaoerweimasaomasaomiao color-blue mr10",
          content:"使用支付宝扫"
        }},{label:"微信",value:"",code:{
          url:"",
          icon:"iconfont icon-saoyisaoerweimasaomasaomiao color-blue mr10",
          content:"使用微信扫"
        }},{
          label:"银联",
          value:"",
          title:"无需注册，支持信用卡、储蓄卡",
          index:0,
          list0:[
            {prop:"card",label:"输入卡号",placeholder:"信用卡/储蓄卡"},
            {prop:"check",label:"输入验证信息",placeholder:"请输入验证码"},
            {prop:"",label:"完成支付",placeholder:""}
          ]
        }
      ],
      info:{}
    };
  },
  filters:{
    formaltTitle(state){
      return ["提交信息","支付方式","支付结果"][state]
    }
  },
  methods: {
    /**
     * @name 进入付款环节
     */
    doBuy(){
      this.$store.state.dias.submitInfo.title="付款"
      this.state=1
      console.log("需要开启通讯，监听完成支付");
    },

    /**
     * 修改支付方式
     */
    handleClick(){

    },

    /**
     * @name 银联下一步
     */
    doNext(item){
      item.index==0?this.getCheckNum(item):this.doPay()
    },
    getCheckNum(item){
      item.index++
      console.log("获取验证码");
    },
    doPay(){
      console.log("开始支付");
      this.state=2
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.submit-info {
  font-size: 14px;
  main{
    padding: 10px 50px 10px 0;
    div.box{
      display: flex;
      line-height: 36px;

      .title{
        display: inline-block;
        min-width: 75px;
        margin-right: 10px;
        text-align: right;
      }
      .btn{
        padding: 0 5px;
        font-size: 12px;
        border-radius: 0;
        margin-left: 10px;
      }
    }
  }
  .pr0{
    padding: 0 20px;
  }
  .pay-result{
    text-align: center;
    .icon-duigou{
      font-size: 100px;
    }
    p{
      margin: 20px 0;
    }
  }
  .submit-btn{
    width: 350px;
    margin: 20px 50px;
  }

  .content_1{
    img{
      width: 200px;
      height: 200px;
      margin: 20px auto;
    }

    p{
      text-align: center;
      line-height: 30px;

      span{
        vertical-align: middle
      }
    }
    .iconfont{
      font-size: 20px;
    }
  }
  .content_2{
    .progress{
      line-height: 80px;
    }
    .input-box{
      width: 250px;
    }
    .btn-box{
      padding-bottom: 50px;
      margin-top: 48px;
      .btn{
        border-radius: 0;
        padding: 0;
        line-height: 36px;
        width: 100px;
      }
    }
  }
}
</style>